import React from 'react'
import { Form, Select, Input, Button } from 'antd'
import PropTypes from 'prop-types'
import MerchantsViewer from './MerchantsViewer'
const FormItem = Form.Item
// const Search = Input.Search
const Option = Select.Option


// const Search = Input.Search

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        audit_status:[
            {value:1, name: '待审核'},
            {value:10, name: '审核通过'},
            {value:20, name: '审核拒绝'}
        ],
        shop_status: [
            {value:1, name: '启用'},
            {value:0, name: '停用'},
        ],
        query: {
            search: {}
        },
        showViewer: false
    }
    componentDidMount () {

    }
    createBusiness = () => {
        this.setState({showViewer: true})
    }
    handleReset = () => {
        this.props.form.resetFields()
        this.props.doSearch({clear: true})
    }
    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            let newValue = {}
            for (let k in values) {
                if (typeof values[k] === 'string') {
                    newValue[k] = values[k].replace(/^\s+|\s+$/g,"")
                } else {
                    newValue[k] = values[k]
                }
            }
            this.props.doSearch(newValue)
        });
    }
    doViewer = (e) => {
        this.setState({showViewer: false})
    }
    render () {
        const { getFieldDecorator } = this.props.form
        return <div>
                <Form
                layout="inline"
                className="supplier-filter"
                onSubmit={this.handleSearch}
            >
                <FormItem
                    label="商家ID"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}
                >
                    {getFieldDecorator('shop_id', {
                    })(
                        <Input placeholder="请输入商家ID" />
                    )}
                </FormItem>
                <FormItem
                    label="商家名称"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}
                >
                    {getFieldDecorator('shop_name', {
                    })(
                        <Input placeholder="请输入商家名称" />
                    )}
                </FormItem>
                <FormItem className="filter-select">
                    <span className="title">商家行业: </span>
                    {getFieldDecorator('business')(
                        <Select allowClear style={{ width: 194 }} placeholder="请选择">
                            <Option value='服装销售'>服装销售</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem className="filter-select">
                    <span className="title">审核状态: </span>
                    {getFieldDecorator('audit_status')(
                        <Select allowClear style={{ width: 194 }} placeholder="请选择">
                            {this.state.audit_status.map(v => <Option key={v.value} value={v.value}>{v.name}</Option>)}
                        </Select>
                    )}
                </FormItem>
                <FormItem className="filter-select">
                    <span className="title">商家启用状态: </span>
                    {getFieldDecorator('shop_status')(
                        <Select allowClear style={{ width: 194 }} placeholder="请选择">
                            {this.state.shop_status.map(v => <Option key={v.value} value={v.value}>{v.name}</Option>)}
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    label="联系人"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}
                >
                    {getFieldDecorator('contact', {
                    })(
                        <Input placeholder="请输入联系人" />
                    )}
                </FormItem>
                <FormItem
                    label="联系电话:"
                    labelCol={{ span: 10 }}
                    wrapperCol={{ span: 14 }}
                >
                    {getFieldDecorator('shop_tel', {
                    })(
                        <Input placeholder="请输入联系电话" />
                    )}
                </FormItem>
                <Button type="primary" htmlType="submit" style={{marginRight: 10}} >查询</Button>
                <FormItem className="filter-select">
                    <a onClick={this.handleReset}>清除条件</a>
                </FormItem>
                <FormItem className="filter-select">
                    <Button type="primary" style={{marginRight: 10}} onClick={this.createBusiness}>创建商家</Button>

                </FormItem>

            </Form>
                <MerchantsViewer showViewer={this.state.showViewer} doViewer={this.doViewer} doSearch={this.props.doSearch} ></MerchantsViewer>
            </div>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    onCreate: PropTypes.func,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
